.changeset/chilly-dancers-switch.md (1)

9-10: Enhance the changeset description

The current description could be more informative. Consider adding:

• Available values for labelPlacement (inside, outside, outside-left)
• Impact on affected components
• Migration notes if any

Also, add a space between "prop" and the ticket reference.

Here's a suggested improvement:

-Adding support for global labelPlacement prop.(ENG-1694)
+Adding support for global labelPlacement prop to customize label positioning across components. 
+
+The labelPlacement prop can be set globally via NextUIProvider with the following values:
+- inside
+- outside
+- outside-left
+
+Affects: Input, Select, DatePicker, DateInput, and related components.
+
+(ENG-1694)

🧰 Tools

🪛 LanguageTool

[uncategorized] ~10-~10: Possible missing comma found.
Context: ...": patch --- Adding support for global labelPlacement prop.(ENG-1694)

(AI_HYDRA_LEO_MISSING_COMMA)

packages/core/system/src/provider-context.ts (1)

14-19: Enhance JSDoc documentation for labelPlacement

While the documentation is present, it would be more helpful to include:

• Description of each possible value
• Example usage
• Default behavior implications

Consider expanding the documentation like this:

  /**
   * Position where the label should appear.
   *
+  * @description
+  * - "inside": Label appears within the input field
+  * - "outside": Label appears above the input field
+  * - "outside-left": Label appears to the left of the input field
+  * 
+  * @example
+  * ```tsx
+  * <NextUIProvider labelPlacement="outside">
+  *   <Input label="Username" />
+  * </NextUIProvider>
+  * ```
   *
   * @default undefined
   */

apps/docs/content/docs/api-references/nextui-provider.mdx (1)

145-150: Enhance the documentation for the labelPlacement prop.

The documentation could be more detailed to help developers understand the impact of each value:

 `labelPlacement`
 
-  - **Description**: Determines the position where label should appear, such as inside, outside or outside-left of the component.
+  - **Description**: Determines the position where label should appear in form components:
+    - `inside`: Places the label inside the input field, floating when focused or filled
+    - `outside`: Places the label above the input field
+    - `outside-left`: Places the label to the left of the input field
+    - `undefined`: Uses the default placement for each component
-  - **Type**: `string` | `undefined`
-  - **Possible Values**: `inside` | `outside` | `outside-left` | `undefined`
+  - **Type**: `"inside" | "outside" | "outside-left" | undefined`
   - **Default**: `undefined`

packages/components/date-input/src/use-time-input.ts (1)

137-145: Optimize the useMemo dependency array.

Consider destructuring the required properties earlier to make the dependencies more explicit and maintainable.

+  const globalLabelPlacement = globalContext?.labelPlacement;
+
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
     const labelPlacement =
-      originalProps.labelPlacement ?? globalContext?.labelPlacement ?? "inside";
+      originalProps.labelPlacement ?? globalLabelPlacement ?? "inside";
 
     if (labelPlacement === "inside" && !label) {
       return "outside";
     }
 
     return labelPlacement;
-  }, [originalProps.labelPlacement, globalContext?.labelPlacement, label]);
+  }, [originalProps.labelPlacement, globalLabelPlacement, label]);

packages/components/date-picker/src/use-date-picker-base.ts (1)

12-12: Consider importing from a shared location.

The useMemo import could be grouped with other React hooks if they're imported from the same location.

-import {useCallback, useMemo} from "react";
+import {useCallback, useMemo, type ReactNode} from "react";

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

#!/bin/bash
# Search for similar behavior in other components
ast-grep --pattern 'if ($placement === "inside" && !$label) {
  return "outside";
}'

#!/bin/bash
# Search for similar behavior with labelPlacement in other components
rg -A 3 'labelPlacement.*=.*"inside"' --type ts

# Search for any label placement logic
rg -A 3 'labelPlacement' --type ts

# Search for documentation about label placement
fd README.md | xargs rg -i 'label.*placement|placement.*label'

packages/core/system/src/hooks/use-label-placement.ts (1)

12-20: Consider adding JSDoc documentation.

The implementation logic is solid with proper fallback handling and edge cases. However, adding JSDoc documentation would help explain the behavior, especially the special case where "inside" placement defaults to "outside" when no label is provided.

+/**
+ * Custom hook to determine label placement based on props and global context.
+ * @param props.labelPlacement - Optional label placement override
+ * @param props.label - Optional label content
+ * @returns The computed label placement, defaulting to "outside" if placement is "inside" with no label
+ */
 export function useLabelPlacement(props: {

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/components/spacer/package.json (1)

39-39: Consider documenting the dependency update rationale

While the Spacer component might not directly use the labelPlacement feature, it requires the updated theme package. Consider documenting this indirect dependency requirement in the changelog.

This update pattern across components suggests a need for a centralized dependency management strategy. Consider using a tool like Renovate or Dependabot to automate version bumps across packages.

packages/components/kbd/package.json (1)

39-39: Version update preserves compatibility

The peer dependency update is appropriate and maintains consistency with other components while preserving backward compatibility through the use of the >= operator.

For package consumers: This update requires a minimum theme version of 2.4.3, but it's recommended to update all NextUI packages together to maintain consistency and avoid potential version conflicts.

packages/components/link/package.json (1)

39-40: Version updates are aligned with the global changes.

The peer dependency updates maintain consistency:

• @nextui-org/theme: >=2.4.3
• @nextui-org/system: >=2.4.5

Consider adding a note in the changelog or documentation about the minimum version requirements for the new labelPlacement feature.

packages/components/breadcrumbs/package.json (1)

39-40: Consider selective version updates based on component needs

The current approach updates all component dependencies uniformly. Consider:

1. Only updating versions for components that actually use the labelPlacement feature
2. Creating a dependency map to track which components require these updates
3. Documenting the minimum version requirements in the PR description

This would help maintain looser version constraints where possible and make future updates easier to manage.

packages/components/tooltip/package.json (1)

40-41: LGTM! Consider updating the changelog

The peer dependency updates are consistent with other components. Since this is part of a feature rollout (global labelPlacement), consider documenting these version requirements in the changelog.

packages/components/modal/package.json (1)

37-41: Consider documenting the minimum version requirements

Since these version updates are related to the new global labelPlacement feature, consider:

1. Adding a note in the migration guide about minimum version requirements
2. Updating the documentation to reflect these version dependencies
3. Adding examples of using the new feature with these minimum versions

This will help users understand the version requirements when using the labelPlacement feature.

Also applies to: 46-47, 40-41

plop/component/package.json.hbs (1)

39-41: 💡 Codebase verification

Both theme and system packages should be aligned to their latest versions

The verification reveals that:

• The system package (2.4.4) is actually ahead of the theme package (2.4.3)
• The system package has labelPlacement-related files, indicating it's actively involved in this feature
• The template should use the latest available versions for both packages

Update the peer dependencies in the template to:

• "@nextui-org/theme": ">=2.4.3"
• "@nextui-org/system": ">=2.4.4"

🔗 Analysis chain

Verify version alignment between theme and system packages

The theme package is bumped to >=2.4.3 while system remains at >=2.4.0. Since this PR adds global labelPlacement support, please verify if @nextui-org/system should also be bumped to maintain version alignment.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if system package has related changes or dependencies on theme package

# Search for labelPlacement-related changes in system package
rg -l "labelPlacement" packages/core/system/

# Check package.json files for current versions
fd -g "package.json" packages/core/system/ -x cat {} | jq -r 'select(.name=="@nextui-org/system") | .version'
fd -g "package.json" packages/core/theme/ -x cat {} | jq -r 'select(.name=="@nextui-org/theme") | .version'

Length of output: 415

packages/components/date-picker/package.json (1)

37-38: 💡 Codebase verification

Update required: Dependency version constraint needs adjustment

The specified version @nextui-org/[email protected] is not yet published (latest available is 2.4.4). While other components consistently use >=2.4.5, this version is not yet available on npm. The theme dependency version >=2.4.3 is valid as this version exists.

• Update @nextui-org/system to use >=2.4.4 instead of >=2.4.5 until the new version is published
• Keep @nextui-org/theme at >=2.4.3 as it's valid

🔗 Analysis chain

Verify dependency version compatibility

The peer dependency updates look consistent with the global labelPlacement feature implementation. Let's verify the version compatibility.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify if the specified versions exist and are stable

# Check if the required versions are published on npm
echo "Checking @nextui-org/system version..."
npm view @nextui-org/system versions --json | jq 'contains(["2.4.5"])'

echo "Checking @nextui-org/theme version..."
npm view @nextui-org/theme versions --json | jq 'contains(["2.4.3"])'

# Check for any deprecation notices
npm view @nextui-org/system deprecated
npm view @nextui-org/theme deprecated

Length of output: 408

---

Script:

#!/bin/bash
# Let's check the latest available versions and version ranges
echo "Latest @nextui-org/system versions:"
npm view @nextui-org/system versions --json | jq -r '.[-5:]'

# Check other components' package.json files for version consistency
echo -e "\nChecking other components' dependencies:"
fd package.json --type f --exec grep -l "@nextui-org/system" {} \; | xargs cat | grep "@nextui-org/system"

Length of output: 4000